<!DOCTYPE html>
<html lang="en">
<head th:replace="_fragment :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css"><!--引入semanticUI-->
    <link rel="stylesheet" type="text/css" href="../static/css/myUse.css">
</head>
<body>

    <!--导航部分-->
    <nav th:replace="_menu :: menu" class="ui inverted attached segment">
        <div class="ui container">
            <!--导航栏-->
            <!--stackable是为了适配移动端-->
            <div class="ui inverted menu secondary stackable">
                <h2 class="ui teal header item">YwrbyBlog</h2>

                <a href="#" class="item m-mobile-hide m-item"><i class="home icon"></i> Home</a> <!--首页-->
                <a href="#" class="item m-mobile-hide m-item"><i class="idea icon"></i> Archives</a> <!--时间线 归档-->
                <a href="#" class="item m-mobile-hide m-item"><i class="tags icon"></i> Tags</a> <!--标签云-->
                <a href="#" class="item m-mobile-hide m-item"><i class="github icon"></i> Github</a>
                <a href="#" class="item m-mobile-hide m-item"><i class="info icon"></i> About</a> <!--关于我-->

                <div class="right item m-mobile-hide m-item">
                    <div class="ui icon input transparent inverted">
                        <input type="text" placeholder="Search...">
                        <i class="search icon link"></i>
                    </div>
                </div>
            </div>
        </div>
        <a class="menu toggle ui black button icon m-right-top m-mobile-show">
            <i class="icon sidebar"></i>
        </a>
    </nav>

    <!--正文部分-->
    <div class="m-padded-tb-large">
        <!--container是SemanticUI中的响应式容器，会根据屏幕大小进行适配-->
        <div class="ui container">
            <div class="ui grid stackable">
                <div class="eleven wide column">
                    <!--博客列表头部-->
                    <div class="ui segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <h3 class="ui teal header">博客</h3>
                            </div>
                            <div class="column right aligned">
                                共 <h2 class="ui orange header m-inline-block">14</h2> 篇
                            </div>
                        </div>
                    </div>
                    <!--博客列表项-->
                    <div class="ui attached segment">
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                        <div class="ui padded vertical segment m-padded-tb2-lr1-large">
                            <!--reversed 表示位置反转，是为了保证文章在移动端展示时，图片显示在最上层-->
                            <!--mobile和stackable是问了文章展示格式适配手机端-->
                            <div class="ui mobile reversed stackable grid">
                                <div class="eleven wide column">
                                    <h3 class="ui header">4-基于SpringBoot的Web开发</h3>
                                    <p>基于SpringBoot的Web开发流程静态资源的导入SpringBoot项目中的静态资源有两种访问方式 通过webjars访问首先引入相关依赖......</p>
                                    <div class="ui grid">
                                        <!--文章基本信息-->
                                        <div class="eleven wide column">
                                            <div class="ui horizontal link list">
                                                <div class="item">
                                                    <img class="ui avatar image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png">
                                                    <div class="content"><a href="#" class="header">Leslie</a> </div>
                                                </div>
                                                <div class="item">
                                                    <i class="calendar icon"></i> 2020-10-1
                                                </div>
                                                <div class="item">
                                                    <i class="eye icon"></i>6888
                                                </div>
                                            </div>
                                        </div>
                                        <!--标签-->
                                        <div class="right aligned five wide column">
                                            <a href="#" target="_blank" class="ui teal basic label m-padded-mini m-text-thin">Spring</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="five wide column">
                                    <img class="ui rounded image" alt="" src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/67052833_p0.jpg">
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--博客列表底部-->
                    <div class="ui bottom attached segment">
                        <div class="ui middle aligned two column grid">
                            <div class="column">
                                <a href="#" class="ui teal basic button">上一页</a>
                            </div>
                            <div class="column right aligned">
                                <a href="#" class="ui teal basic button">下一页</a>
                            </div>
                        </div>
                    </div>
                </div>

                <!--博客侧边栏-->
                <div class="five wide column">

                    <!--个人信息栏-->
                    <div class="ui segments">
                        <div class="vertical fluid menu ui ">
                            <!--头像栏-->
                            <div class="item">
                                <img src="https://ywrbyimg.oss-cn-chengdu.aliyuncs.com/img/ywrby.png" class="ui image tiny circular centered">
                            </div>
                            <!--个人信息栏-->
                            <div class="item ">
                                <div class="ui container center aligned">
                                    <h3 class="ui centered header">Ywrby</h3>
                                    <p class="m-opacity-mini m-text-spaced">Students majoring in CS at SWU</p>
                                </div>
                            </div>
                            <!--社交图标栏-->
                            <div class="item">
                                <div class="ui container center aligned">
                                    <button class="ui teal  button fluid">
                                        <i class="github icon"></i>
                                        Follow Me
                                    </button>
                                </div>
                                <div class="ui container center aligned m-padded-t1-tiny">
                                    <div class="ui grid">
                                        <div class="four wide column">
                                            <div class="ui container center aligned ">
                                                <button class="ui circular facebook icon button">
                                                    <i class="facebook icon"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="four wide column">
                                            <div class="ui container center aligned ">
                                                <button class="ui circular twitter icon button">
                                                    <i class="twitter icon"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="four wide column">
                                            <div class="ui container center aligned ">
                                                <button class="ui circular linkedin icon button">
                                                    <i class="wechat icon"></i>
                                                </button>
                                            </div>
                                        </div>

                                        <div class="four wide column">
                                            <div class="ui container center aligned ">
                                                <button class="ui circular youtube icon button">
                                                    <i class="youtube icon"></i>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>


                            </div>
                        </div>
                    </div>

                    <!--通知栏-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid center">
                                <div class="column left aligned">
                                    <i class="pencil alternate icon"></i>Announcement
                                </div>
                            </div>
                        </div>
                        <div class="ui segment m-text-thin m-text-spaced m-opacity-mini">
                            Less is more
                        </div>
                    </div>

                    <!--标签栏-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid center">
                                <div class="column left aligned">
                                    <i class="tags icon"></i>标签
                                </div>
                                <div class="column right aligned">
                                    <a href="#" target="_blank">more <i class="angle double right icon"></i> </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment">
                            <div class="vertical fluid menu ui">
                                <div class="item">
                                    SpringCloud <div class="ui label">13</div>
                                </div>
                                <div class="item">
                                    JavaWeb <div class="ui label">12</div>
                                </div>
                                <div class="item">
                                    SpringCloud <div class="ui label">13</div>
                                </div>
                                <div class="item">
                                    JavaWeb <div class="ui label">12</div>
                                </div>
                                <div class="item">
                                    SpringCloud <div class="ui label">13</div>
                                </div>
                                <div class="item">
                                    JavaWeb <div class="ui label">12</div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--最近文章-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid center">
                                <div class="column left aligned">
                                    <i class="archive icon"></i>最近文章
                                </div>
                                <div class="column right aligned">
                                    <a href="#" target="_blank">more <i class="angle double right icon"></i> </a>
                                </div>
                            </div>
                        </div>
                        <div class="ui segment">
                            <div class="vertical fluid menu ui">
                                <div class="item">
                                    <div>4-基于SpringBoot的Web开发</div>
                                    <div class="ui link list">
                                        <p class="item">2020-10-1</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div>4-基于SpringBoot的Web开发</div>
                                    <div class="ui link list">
                                        <p class="item">2020-10-1</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div>4-基于SpringBoot的Web开发</div>
                                    <div class="ui link list">
                                        <p class="item">2020-10-1</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div>4-基于SpringBoot的Web开发</div>
                                    <div class="ui link list">
                                        <p class="item">2020-10-1</p>
                                    </div>
                                </div>
                                <div class="item">
                                    <div>4-基于SpringBoot的Web开发</div>
                                    <div class="ui link list">
                                        <p class="item">2020-10-1</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--博客访问信息-->
                    <div class="ui segments">
                        <div class="ui secondary segment">
                            <div class="ui two column grid center">
                                <div class="column left aligned">
                                    <i class="info icon"></i>Info
                                </div>
                            </div>
                        </div>
                        <div class="ui segment">
                            <div class="ui segment">
                                <div class="ui two column grid center">
                                    <div class="column left aligned">
                                        Article :
                                    </div>
                                    <div class="column right aligned">
                                        13
                                    </div>

                                    <div class="column left aligned">
                                        UV :
                                    </div>
                                    <div class="column right aligned">
                                        699
                                    </div>

                                    <div class="column left aligned">
                                        PV :
                                    </div>
                                    <div class="column right aligned">
                                        7299
                                    </div>

                                    <div class="column left aligned">
                                        LastPush :
                                    </div>
                                    <div class="column right aligned">
                                        1 hours ago
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--页脚部分-->
    <footer th:replace="_bottom :: bottom" class="ui inverted vertical segment">
        <!--center aligned保证所有条目居中显示-->
        <div class="ui container center aligned">
            <!--inverted表示颜色反转，divided表示按照给定大小显示分界线，二者共同作用显示反色分界线-->
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <img src="../static/img/mycode.png" alt="" style="width: 100px">
                </div>

                <div class="four wide column">
                    <h4 class="ui inverted header">最新博客</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">【Blog】Test1</a>
                        <a class="item" href="#">【Blog】Test2</a>
                        <a class="item" href="#">【Blog】Test3</a>
                    </div>
                </div>

                <div class="four wide column">
                    <h4 class="ui inverted header">联系我</h4>
                    <div class="ui inverted link list">
                        <a class="item" href="#">Tel: 187xxxx3839</a>
                        <a class="item" href="#">Email: ywrby@test.cn</a>
                    </div>
                </div>

                <div class="five wide column">
                    <h4 class="ui inverted header">关于我</h4>
                    <p class="ui inverted m-opacity-mini m-text-thin m-text-spaced m-text-lined">
                        I am a Student majoring in CS at SWU. If you have any questions about the computer, You can contact me by the way beside
                    </p>
                </div>


            </div>
            <!--分割线-->
            <div class="ui inverted section divider"></div>
            <p class=" m-opacity-mini m-text-thin m-text-spaced m-text-lined">©2020 - 2021 By Ywrby</p>
        </div>
    </footer>

    <div th:replace="_fragment :: myScript">
        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <!--jquery-->
        <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script> <!--semanticUI-->
        <script src="../static/lib/prism/prism.js"></script> <!--Prism-->
        <script src="../static/lib/tocbot/tocbot.min.js"></script> <!--Tocbot-->
        <script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.3/jquery.scrollTo.min.js"></script>
    </div>

    <!--定义汉堡按键实现汉堡菜单-->
    <script>
        $(".menu.toggle").click(function (){
            $(".m-item").toggleClass("m-mobile-hide");
        })
    </script>
</body>
</html>